<template>
	<view id="billsBox" class="bills-box" 
		:style="'height: calc(100vh - ' + hOffset + 'px); margin-top: ' + hOffset + 'px;'">
		<!-- 单条单据 -->
		<view class="item" v-for="(item, index) in billsLs" :key="index" @click="clickItem(item)" :class="item.id == billsId ? 'active' : ''">
			<!-- 单据上部分 -->
			<view class="item-t">
				<view class="i-t-a-a">
					<view class="i-t-a-a-name">{{ item.customer ?  item.customer : "散客"}}</view>
					<view class="i-t-a-a-sname">{{ item.customer_cp}}</view>
				</view>
				<view class="i-t-a-b">
					<text class="i-t-a-b-from" v-if="item.ch_txt">{{item.ch_txt}}</text>
					<text class="i-t-a-b-s" v-if="item.status_act && item.status_act.status_send_txt && (st != 1 && st != 13)">{{item.status_act.status_send_txt}}</text>
				</view>
				
			</view>
			<!-- 单据下部分 -->
			<view class="item-b">
				<view class="item-b-a">
					<view class="item-b-a-a" :title="hoverText" >
						{{ item.no ? item.no : "暂无单号"}}
						<el-tag size="mini" style="margin-left: 10px;" @click="coypOrderNum(item.no)">复制</el-tag>
					</view>
					<view class="item-b-a-b">{{ item.atime_txt }}</view>
				</view>
				<view class="item-b-b">
					<view class="b-b-l">
						<view class="b-b-l-a">
							<view class="b-b-l-sadd">
								{{ item.shop }}
							</view>
							<view class="b-b-l-hand">{{ item.uname_cp }}</view>
						</view>
						<view class="b-b-l-b">
							<!-- <view class="b-b-l-price">
								{{ st == 21 ? item.amount_all : item.amount_pay }}
							</view> -->
							<view class="b-b-l-price">
								{{ item.amount_all }}
							</view>
							<view class="divider" v-if="item.amount_notpay > 0">|</view>
							<view class="b-b-l-arrears" v-if="item.amount_notpay > 0">欠{{ item.amount_notpay }}</view>
						</view>
					</view>
					<view class="b-b-r">
						<view class="b-b-r-rt-txt" v-if="item.status_act.status_rt_txt == '退货申请待处理'">{{item.status_act && item.status_act.status_rt_txt ? item.status_act.status_rt_txt : ""}}</view>
						<view class="b-b-r-pay">{{item.status_act && item.status_act.status_pay_txt ? item.status_act.status_pay_txt : ""}}</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-if="!billsLs || billsLs.length == 0"></empty>
	</view>
</template>

<script>
import util from '../../js/util/Util.js';
import empty from '../comm/empty.vue';
export default {
	props: ['setHetght', 'billsLs',"hOffset","isSearching","st"],
	components:{ empty },
	data() {
		return {
			hoverText: '点击复制单号',
			screenHeight: 0, //屏幕高度
			info: [], //展示的列表数据
			isLoading: false, //防止频繁触发
			bottomDistinct: 200, //距离底部多少像素时触发
			billsId: null,
			billsData: []
		};
	},
	methods: {
		/*** 点击了某个item ***/
		clickItem(item)
		{
			if(item.id == this.billsId) return;
			this.$emit("setBillsInfoData",item);
		},
		
		setBillsId(id)
		{
			this.billsId = id;
		},
		
		handlerScroll()
		{
			let self = this;
			this.$nextTick(()=>
			{
				var flag = util.scrollData("#billsBox");
				if(flag)
				{
					// 加载数据
					if(!this.isSearching)
						this.$emit("orderList");
					else
						this.$emit("searchKwBillList")
				}
			});
		},
		
		/*** 点击复制单号 ***/
		coypOrderNum(data)
		{
			let url = data;
			let oInput = document.createElement('input');
			oInput.value = url;
			document.body.appendChild(oInput);
			oInput.select(); // 选择对象;
			document.execCommand("Copy"); // 执行浏览器复制命令
			// 复制成功提示;
			this.$msg({title : '复制单号成功'})
			oInput.remove()
		},
	},
	mounted()
	{
		if(document.querySelector("#billsBox"))
			document.querySelector("#billsBox").addEventListener("scroll",this.handlerScroll,true);
	},
	destroyed()
	{
		if(document.querySelector("#billsBox"))
			document.querySelector("#billsBox").removeEventListener("scroll",this.handlerScroll);
	},
}
</script>

<style lang="scss">
.bills-box {
	width: 344px;
	overflow-y: auto;
	.item {
		padding-top: 5px;
		background: #fff;
		cursor: pointer;
		border-bottom: 1px #EFEFEF solid;
		.item-t {
			padding: 2px 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.i-t-a-a,
			.i-t-a-b {
				display: flex;
				align-items: center;
				.i-t-a-a-name {
					font-size: 14px;
					max-width: 80px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.i-t-a-a-sname {
					font-size: 14px;
					padding-left: 10px;
					max-width: 160px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.i-t-a-b-from {
					padding: 0px 4px;
					font-size: 14px;
					line-height: 20px;
					color: #666;
					border: 1px solid #E9E9E9;
					border-radius: 3px;
					background: rgba(233, 233, 233, 0.7);
				}
				
				.i-t-a-b-s {
					padding: 0px 4px;
					font-size: 14px;
					line-height: 20px;
					color: #00cc00;
				}
				
				.i-t-a-b-active {
					font-size: 14px;
					padding-left: 10px;
					// font-weight: 700;
				}
			}
		}
		.item-b {
			padding: 0 10px;
			.item-b-a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.item-b-a-a,
				.item-b-a-b {
					font-size: 14px;
					color: #999;
					text {
						font-size: 20px;
						padding-right: 10px;
					}
				}
				
				.item-b-a-a
				{
					color: #666;
				}
			}
			.item-b-b {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.b-b-l {
					.b-b-l-a,
					.b-b-l-b {
						display: flex;
						align-items: center;
						.b-b-l-sadd,
						.b-b-l-hand {
							color: #666;
							font-size: 14px;
							padding-right: 10px;
							text {
								font-size: 20px;
								padding-right: 10px;
							}
						}
						.b-b-l-price {
							color: #666;
							font-size: 20px;
							padding-right: 10px;
							// font-weight: 700;
							text {
								// font-weight: 500;
								font-size: 20px;
								padding-right: 10px;
							}
						}
						.b-b-l-arrears {
							font-size: 14px;
							color: red;
						}
						.divider {
							font-size: 14px;
							padding-right: 10px;
						}
					}
				}
				.b-b-r {
					display: flex;
					.b-b-r-rt-txt
					{
						font-size: 14px;
						color: red;
						padding-right: 10px;
					}
					.b-b-r-pay {
						font-size: 14px;
						// font-weight: 700;
						color: #3388ff;
					}
				}
			}
		}
	}
	.item:hover {
		&.active {
			background: #F8F8F8;
		}
		// background: rgba(200, 200, 200, 0.01);
		background:#F8F8F8;
	}
	.active {
		background: #F8F8F8;
	}
}
.height-125 {
	height: calc(100vh - 150px);
	margin-top: 150px;
}
.height-87 {
	height: calc(100vh - 110px);
	margin-top: 110px;
}
.bills-box::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}
.bills-box::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
	background: #ccc;//rgba(0, 0, 0, 0.0);
	scrollbar-arrow-color: red;
}
.bills-box::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.0);
	border-radius: 0;
	background: rgba(0, 0, 0, 0);
}
</style>